<template>
  <mk-page type="dialog-view" title="dialog">
    <div slot="content">
      <div class="demo-dialog">
        <mk-button @click="showAlert" size="large">Dialog - type</mk-button>
        <mk-button @click="showBtn" size="large">Dialog - btn</mk-button>
        <mk-button @click="showClose" size="large">Dialog - show close</mk-button>
        <mk-button @click="showSlot" size="large">Dialog - slot</mk-button>
      </div>
    </div>
  </mk-page>
</template>
<style lang="scss" >
@import '~assets/stylesheets/main';

.demo-dialog > * {
  margin-bottom: 15px;
}
.my-title-img {
  height: 120px;
  margin-bottom: 16px;
  background: url('')
    no-repeat center;
  background-size: 100%;
}
.my-content {
  text-align: center;
}
</style>
<script>
import MkPage from '../components/mk-page.vue'
export default {
  name: 'demo-dialog',
  mixins: [],
  data() {
    return {}
  },
  mounted() {},
  components: {
    MkPage
  },
  methods: {
    showAlert() {
      this.dialog = this.$createMkDialog({
        type: 'alert',
        title: '我是标题',
        content: '我是内容',
        icon: 'mkic-alert'
      })
      this.dialog.show()
    },
    showBtn() {
      this.dialog = this.$createMkDialog({
        type: 'confirm',
        icon: 'cubeic-alert',
        title: '我是标题',
        content: '我是内容',
        confirmBtn: {
          text: '确定按钮',
          active: true,
          disabled: false,
          href: 'javascript:;'
        },
        cancelBtn: {
          text: '取消按钮',
          active: false,
          disabled: false,
          href: 'javascript:;'
        },
        onConfirm: () => {
          this.$toast({
            message: '操作成功',
            icon: 'ok',
            duration: -1
          })
        },
        onCancel: () => {
          this.$toast({
            message: '提示信息',
            position: 'bottom'
          })
        }
      })
      this.dialog.show()
    },
    showClose() {
      this.dialog = this.$createMkDialog({
        type: 'alert',
        icon: 'cubeic-alert',
        showClose: true,
        title: '标题',
        onClose: () => {
          this.$toast({
            message: '提示信息',
            position: 'bottom'
          })
        }
      })
      this.dialog.show()
    },
    showSlot() {
      this.dialog = this.$createMkDialog(
        {
          type: 'alert',
          confirmBtn: {
            text: '我知道了',
            active: true
          }
        },
        createElement => {
          return [
            createElement(
              'div',
              {
                class: {
                  'my-title': true
                },
                slot: 'title'
              },
              [
                createElement('div', {
                  class: {
                    'my-title-img': true
                  }
                }),
                createElement('p', '附近车少,优选出租车将来接您')
              ]
            ),
            createElement(
              'p',
              {
                class: {
                  'my-content': true
                },
                slot: 'content'
              },
              '价格仍按快车计算'
            )
          ]
        }
      )
      this.dialog.show()
    }
  }
}
</script>
